<template>
	<div class="main-height">
		<el-row type="flex" class="tree-box" :gutter="10">
			<el-col :span="8" class="tree-box-body">
				<el-input size="mini" placeholder="请输入关键字" v-model="filterText" clearable />
				<el-tree class="tree" ref="tree" 
					:data="supplierList" 
					:props="{label: 'orgNameZh'}" 
					:filter-node-method="filterNode" 
					@node-click="checkNode"
				>
					<div class="tree-item" slot-scope="{ node, data }">
						<el-tooltip effect="dark" placement="right" :content="node.label">
							<div>{{ node.label }}</div>
						</el-tooltip>
					</div>
				</el-tree>
			</el-col>
			<el-col :span="16" class="tree-box-body" v-loading="loading">
				<div class="category-tree-head">
					<span class="currentSupplier">{{ supplierName }}</span>
					<div class="category-tree-head-search">
						<el-input size="mini" placeholder="请输入关键字" v-model="filterCategory" clearable />
					</div>
					<template>
						<el-button size="mini" type="primary" @click="selectAll">全选</el-button>
						<el-button size="mini" type="primary" @click="selectAllNormal">全选（普通分类）</el-button>
						<el-button size="mini" type="primary" @click="selectCannel">全不选</el-button>
						<el-button size="mini" type="primary" @click="auth">确认授权</el-button>
						
					</template>
				</div>
				<template>
					<el-tree v-if="supplierId != ''" class="tree tree-category" ref="treeCategory"
						:data="categoryList" 
						:default-checked-keys="categoryAuthList"
						show-checkbox
						:props="{label: 'categoryNameAll'}" 
						:filter-node-method="filterNodeCategory" 
						node-key="id"
					>
						<div class="tree-item" slot-scope="{ node, data }">
							<div class="item">{{ node.label }}</div>
						</div>
					</el-tree>
					<div v-else>
						<span class="noSupplier">
							请在左侧选择一个供应商管
						</span>
					</div>
				</template>
			</el-col>
		</el-row>
	</div>
</template>

<script>
	import { supplierAllList, allCategory, authCategory, authCategoryIds } from "@/api/supplierActivity/supplier"
	export default {
		name: "categoryAuth",
		data() {
			return {
				loading: false,
				supplierList: [],
				categoryList: [],
				categoryAuthList: [],
				supplierId: "",
				supplierName: "",
				filterText: "",
				filterCategory: "",
				supplierQueryParams: {
					"auditStatus": 1,
					"orgNameZh": undefined
				}
			}
		},
		mounted() {
			this.getSupplierList();
			this.getCategoryList();
		},
		methods: {
			getSupplierList() {
				supplierAllList(this.supplierQueryParams).then(res => {
					this.supplierList = res.rows
				})
			},
			getCategoryList() {
				allCategory().then(res => {
					this.categoryList = res
				})
			},
			filterNode(value, data) {
				if(!value.toUpperCase()) return true
				return data.orgNameZh.toUpperCase().indexOf(value.toUpperCase()) !== -1
			},
			filterNodeCategory(value, data) {
				if(!value.toUpperCase()) return true
				return data.categoryNameAll.toUpperCase().indexOf(value.toUpperCase()) !== -1
			},
			checkNode(data, node, dom) {
				this.supplierId = data.id
				this.supplierName = data.orgNameZh
			},
			getKeys() {
				console.log(this.$refs.treeCategory.getCheckedKeys())
			},
			selectAll() {
				const selectList = [];
				this.categoryList.forEach(row => {
					selectList.push(row.id)
				})
				this.$refs.treeCategory.setCheckedKeys(selectList)
			},
			selectAllNormal() {
				const selectList = [];
				this.categoryList.forEach(row => {
					if(row.itemType == 1 || row.itemType == 2) {
						selectList.push(row.id)
					}
				})
				this.$refs.treeCategory.setCheckedKeys(selectList)
			},
			selectCannel() {
				this.$refs.treeCategory.setCheckedKeys([])
			},
			auth() {
				const categoryIds = this.$refs.treeCategory.getCheckedKeys();
				authCategory(this.supplierId, categoryIds).then(res => {
					this.$message.success("操作成功")
				})
			}
			
		},
		watch: {
			filterText(val) {
				this.$refs.tree.filter(val)
			},
			filterCategory(val) {
				this.$refs.treeCategory.filter(val)
			},
			supplierId(val) {
				this.loading = true;
				authCategoryIds(val).then(res => {
					setTimeout(() => {
						this.loading = false
					}, 500)
					this.$refs.treeCategory.setCheckedKeys(res)
				})
			}
		}
	}
</script>

<style soped lang="scss">
	.main-height{
		height: calc(100vh - 90px);
		overflow: hidden;
		position: relative;
	}
	
	.tree{
		width: 100%;
		margin-top: 10px;
	}
	
	.tree-box{
		height:100%;
		display: block;
		overflow: hidden;
	}
	
	.tree-box-body {
		overflow-y: scroll;
		height: 100%;
		display: block;
		overflow-x: hidden;
		padding: 5px;
	}
	
	.tree-item{
		width: 100%
	}
	
	.tree-box-body{
		.cell{
			text-align: left;
		}
	}
	
	.category-tree-head{
		display: flex;
		justify-content: flex-start;
		
		.category-tree-head-search{
			width: 220px;
			padding-left: 15px;
			padding-right: 15px;
		}
	}
	
	.tree-category{
		padding-left: 10px;
	}
	
	.noSupplier{
		font-size: 40px;
		font-weight: bold;
		color: #dfdfdf;
		padding: 40px;
		line-height: 4em;
	}
	
	.currentSupplier{
		padding-left: 15px;
		line-height: 2rem;
		font-weight: bold;
		color: #ff4d4f;
	}
</style>